<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
</head>
<body>
<div id="app">
    <h1>妖怪列表</h1>
    <table border="1" width="300">
        <tr>
            <td>名字</td>
            <td>年龄</td>
        </tr>
        <tr v-for="monster in monsterList">
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
            </td>
        </tr>
    </table>
</div>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        // data / created() / methods 是一个固定结构
        data: {
            monsterList: []//数组
        }, created() { //在页面渲染前执行,调用 list()  created()是生命周期函数，不要写到methods里面
            this.list()
        }, methods: {
            list() {
                /** 老韩解读
                 * 1. 使用 axios 发送 ajax 请求
                 * 2. 语 法 格 式 axios. 请 求 方 式 (请求路径).then(箭头函数).catch(箭头函数)
                 * 3. 请求成功，执行 then 的函数, response 就是返回的数据, 名字由程序员确定
                 * 4. 请求失败, 执行 catch 的函数
                 * 5. this.monsterList = response.data.data.items 把返回的data.items 赋给 monsterList
                 * 6. 这里的 http://127.0.0.1:63342/axios/response.data.json 路径需要根据实际的端口和资源名来修改
                 * 7.list在生命周期函数created()中调用-自己去回顾vue的生命周期函数
                 */
                axios.get('http://localhost:63342/promise_vue/axios/response.data.json')
                    .then(response => {
                        console.log(response)
                        this.monsterList = response.data.data.items
                        //可以再次发出ajax请求
                    }).catch(error => {
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>

